import React, { Component } from 'react';
import { TopicWrapper, TopicItem } from '../style';
import { connect } from 'react-redux';


class Topic extends Component{
  render() {
    const { topicList } = this.props
    const JStopicList = topicList.toJS()
    return (
      <TopicWrapper>
        {
          JStopicList.map((item)=> {
            return(
              <TopicItem key={item.id}>
                <img src={item.imgUrl} alt={item.title}/>
                <span>{item.title}</span>
              </TopicItem>
            )
          })
        }
      </TopicWrapper>
    )
  }
}

const mapState = (state) => {
  return {
    topicList: state.getIn(['home','topicList']),
  }
}

export default connect(mapState, null)(Topic);



